<template>
    <view class="viewport">
      <!-- 地址列表 -->
      <scroll-view  scroll-y>
        <view class="address">
          <!-- 按组使用 -->
          <uni-swipe-action>
            <uni-swipe-action-item
              v-for="item in addressList"
              :key="item.id"
              class="swipe-cell"
            >
              <view class="item" @click="selectedAddress(item)">
                <view class="user">
                  {{ item.receiver }}
                  <text>{{ item.contact }}</text>
                  <text v-if="item.isDefault === 1" class="badge"> 默认 </text>
                </view>
                <view class="locate">
                  {{ item.fullLocation }}{{ item.address }}
                </view>
                <!-- 🐛 添加阻止冒泡 -->
                <navigator
                  :url="`./form?id=${item.id}`"
                  class="edit"
                  hover-class="none"
                >
                  修改
                </navigator>
              </view>
              <template v-slot:right>
                <view class="swipe-cell-action">
                  <button @tap="onAddressRemove(item.id)" class="delete-button">
                    删除
                  </button>
                </view>
              </template>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </scroll-view>
      <!-- 添加按钮 -->
      <view class="add-btn">
        <navigator hover-class="none" url="./form">新建地址</navigator>
      </view>
    </view>
  </template>

<script>
import { mapMutations } from "vuex";
import {getMemberAddress,deleteMemberAddress} from "@/api/address"
export default {
    data() {
        return {
          // 地址列表
          addressList: [],
        
        };
    },
    onShow(){
       this.loadDate()
    },
    methods:{
      ...mapMutations("address",["setSelectedAddress"]),
      // 获取数据
      async loadDate(){
        const res = await getMemberAddress()
        // console.log(res);
        this.addressList = res.result
      },

      // 删除 点击
      async onAddressRemove(id){
        /* 
          1 弹出 确认框 问用户是否确定
          2 发送 删除请求 
          3 恭喜用户 成功
          4 刷新数据 - 不要再看到被删除的数据 
            1 直接删除data中地址数组对应的数据 
            2 重新发送请求获取最新数据 
        */

        const [err,{confirm}] = await uni.showModal({
          title:"提示",
          content:"您确定删除吗？"
        })

        if(confirm){
          const res = await deleteMemberAddress(id)
          uni.showToast({title:"删除成功！"})
          this.loadDate()
        }
      },

      // 选择收货地址
      selectedAddress(address){
        /*
      1 获取到被点击的地址 对象格式的数据
      2 存到vuex
      3 返回上一页
         0 在onLoad中通过参数 判断 来源页面
         0 通过 getCurrentPages() 获取到当前打开的页面的记录
         1 判断你是从哪里页面进来
         2 如果你是从 填写订单页面进来 就返回上一页
         2 否则不返回了！！！
       */
        const pages = getCurrentPages()// 获取当前小程序中 打开的页面的记录
        console.log(108,pages);
        // 获取到当前页面记录
        const currentPage = pages[pages.length - 1]
        const {from} = currentPage.options// 获取到 传递的当前页面的url参数
        
        if(from){
          this.setSelectedAddress(address)
          uni.navigateBack()
        }
      }
    }
};
</script>


<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f4f4;
  scroll-view {
    padding-top: 20rpx;
  }
}
.address {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .item {
    line-height: 1;
    padding: 40rpx 10rpx 38rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    .user {
      font-size: 28rpx;
      margin-bottom: 20rpx;
      color: #333;
      text {
        color: #666;
      }
      .badge {
        display: inline-block;
        padding: 4rpx 10rpx 2rpx 14rpx;
        margin: 2rpx 0 0 10rpx;
        font-size: 26rpx;
        color: #27ba9b;
        border-radius: 6rpx;
        border: 1rpx solid #27ba9b;
      }
    }
    .locate {
      line-height: 1.6;
      font-size: 26rpx;
      color: #333;
    }
    .edit {
      position: absolute;
      top: 36rpx;
      right: 30rpx;
      padding: 2rpx 0 2rpx 20rpx;
      border-left: 1rpx solid #666;
      font-size: 26rpx;
      color: #666;
      line-height: 1;
    }
  }
  .swipe-cell {
    &:last-child {
      .item {
        border: none;
      }
    }
  }
}
.swipe-cell-action {
  height: 100%;
  .delete-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 100%;
    font-size: 28rpx;
    color: #fff;
    border-radius: 0;
    padding: 0;
    background-color: #cf4444 !important;
  }
}
.add-btn {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
</style>

